<template>
  <div class="job-list" ref="jobListCustomer">
    <div class="job-wrap">
      <transition-group tag="div" name="list">
        <div class="job-item rippleMagic" v-for="v in list" :key="'job_'+v.id"
             @click="jumpTo(v)">
          <div class="job-name">
            <span class="name ellipsis">{{ v.name }}</span>
            <span class="pay">{{ v.payid }}-{{ v.pay_end }}k</span>
          </div>
          <div class="wrap">
            <p>
              <i class="iconfont icon-map"></i>
              <span>{{ v.city_name || '暂无' }}</span>
            </p>
            <p>
              <i class="iconfont icon-edit"></i>
              <span>{{ v.is_all === 0 ? '实习' : '全职' }}</span>
            </p>
            <p>
              <i class="iconfont icon-hat"></i>
              <span>{{ v.eid || '暂无' }}</span>
            </p>
          </div>
          <div class="company">
            <div class="logo" :style="{
              background: 'url(' + (v.logo || v.company_logo) + ') center center / cover no-repeat',
            }"></div>
            <div class="name">
              <p class="title ellipsis">{{ v.cname || v.company_name }}</p>
              <p class="type ellipsis">{{ v.industry || v.industry_data }}</p>
            </div>
            <div class="btn-box">查看详情</div>
          </div>
        </div>
      </transition-group>
    </div>
  </div>
</template>

<script>
import { getJobList } from '@/api/company'
// import { throttle } from '@/utils/publicFun'

export default {
  name: 'job',
  data () {
    return {
      sort: 1,
      pageNo: 1,
      total: 0,
      finished: false,
      loading: false,
      list: [],
      scrollTop: 0,
      itemHeight: 300
    }
  },
  watch: {},
  async created () {
    await this.fetchData()
    this.listenerFunction()
  },
  mounted () {
    setTimeout(() => {
      this.checkOutItemHeight()
    }, 200)
  },
  beforeDestroy () {
    this.cancelHandleScroll()
  },
  methods: {
    listenerFunction () {
      document.addEventListener('scroll', this.scrollBottom, true)
    },
    cancelHandleScroll () {
      document.removeEventListener('scroll', this.listenerFunction)
    },
    checkOutItemHeight () {
      const height = this.$refs.jobListCustomer.offsetHeight || 1000;
      this.itemHeight = height / 10 * 5;
    },
    scrollBottom (e) {
      if (!e) return
      let Scroll = e.target
      let scrollHeight = Scroll.scrollHeight - Scroll.clientHeight
      this.scrollTop = Scroll.scrollTop
      if (scrollHeight - Scroll.scrollTop < this.itemHeight && !this.loading && !this.finished) {
        this.loading = true
        this.fetchData()
      }
    },
    fetchData () {
      getJobList({
        cityid: '',
        is_all: '',
        eid: '',
        posttypeid: '',
        attrid: '',
        industryid: '',
        keywords: '',
        sort: this.sort,
        page: this.pageNo++,
      }).then(res => {
        this.loading = false
        if (res.code === 200) {
          res.data && (this.total = res.data.count || 0)
          res.data && this.list.push(...res.data.data)
          if (this.list.length >= this.total) {
            this.finished = true
          }
        } else {
          this.finished = true
          this.$alertErr(res.msg)
        }
      }).catch(err => {
        this.finished = true
        this.loading = false
        this.$alertErr(err || '网络错误, 稍后再试！')
      })
    },
    jumpTo (obj) {
      if (!obj.id) {
        this.$alertWarn('未获取到ID，请刷新后再试！')
        return
      }
      let timers = setTimeout(() => {
        this.$router.push({
          path: 'job-detail',
          query: {
            id: obj.id,
          },
        })
        clearTimeout(timers)
        timers = null
      }, 300)
    },
  },
}
</script>

<style lang="stylus" scoped>
.job-list

  .job-wrap
    height 100%

  .van-list
    height 100%

    & > div
      background #f6f7f8

  .job-item
    padding 20px
    min-height 152px
    width 375px
    overflow hidden
    position relative
    margin-bottom 10px
    background #fff

    &.showState
      padding-bottom 0

    &:first-child
      border-top 0

    &:last-child
      margin 0

    .job-name
      display flex
      font-size 18px
      height 30px
      align-items center

      .name
        flex 1
        color #333

      .pay
        flex 0 0 70px
        text-align right
        color $color-danger

    .wrap
      margin 10px 0
      height 22px
      line-height 22px
      display flex

      p
        margin-right 10px
        padding 0 8px
        height 18px
        line-height 18px
        background #f5f5f5
        color #666
        border-radius 3px

        i
          font-size 10px
          margin-right 5px

        span
          font-size 12px

    .company
      display flex
      align-items center

      .logo
        flex 0 0 48px
        height 48px
        width 48px
        font-size 0
        border-radius 50%
        border 1px solid #ebebeb
        background #fff
        overflow hidden

        img
          width 100%

      .name
        margin-left 5px
        flex 0 0 185px
        overflow hidden

        .title
          font-size 12px
          color #333

        .type
          margin-top 5px
          font-size 10px
          color #999

      .btn-box
        margin-top 8px
        flex 0 0 100px
        height 30px
        line-height 28px
        text-align center
        color $color-main
        border-radius 15px
        font-size 12px
        border 1px solid $color-main

    .state-box
      margin-top 10px
      border-top: 1px solid #ebebeb;
      height 40px
      line-height 40px
      display flex
      align-items center
      justify-content space-between

      span
        font-size 12px
        color #999

      .state
        position: relative;
        padding-left: 10px;

        &::before
          content ''
          height 12px
          width 2px
          top 14px
          background $color-main
</style>
